Ovladavanje Navigation API-jem: Rutiranje i upravljanje poviješću u Single Page aplikacijama

Navigation API predstavlja značajan napredak u načinu na koji obrađujemo rutiranje i upravljanje poviješću unutar Single Page aplikacija (SPA). Tradicionalne metode često se oslanjaju na manipulaciju `window.location` objekta ili korištenje vanjskih biblioteka. Iako su nam ti pristupi dobro služili, Navigation API nudi jednostavnije, učinkovitije i značajkama bogatije rješenje, pružajući programerima veću kontrolu nad korisničkim iskustvom navigacije.

Što je Navigation API?

Navigation API je moderni API preglednika dizajniran da pojednostavi i poboljša način na koji SPA aplikacije upravljaju navigacijom, rutiranjem i poviješću. Uvodi novi `navigation` objekt, pružajući metode i događaje koji omogućuju programerima da presreću i kontroliraju navigacijske događaje, ažuriraju URL i održavaju dosljednu povijest pregledavanja bez potpunog ponovnog učitavanja stranice. To rezultira bržim, glađim i responzivnijim korisničkim iskustvom.

Prednosti korištenja Navigation API-ja

• Poboljšane performanse: Uklanjanjem potpunog ponovnog učitavanja stranice, Navigation API značajno poboljšava performanse SPA aplikacija. Prijelazi između različitih pogleda postaju brži i glađi, što dovodi do boljeg korisničkog iskustva.
• Poboljšana kontrola: API pruža preciznu kontrolu nad navigacijskim događajima, omogućujući programerima da presreću i mijenjaju ponašanje navigacije prema potrebi. To uključuje sprječavanje navigacije, preusmjeravanje korisnika i izvršavanje prilagođene logike prije ili nakon što se navigacija dogodi.
• Pojednostavljeno upravljanje poviješću: Upravljanje poviješću preglednika postaje lakše s Navigation API-jem. Programeri mogu programski dodavati, zamjenjivati i prolaziti kroz unose u povijesti, osiguravajući dosljedno i predvidljivo iskustvo pregledavanja.
• Deklarativna navigacija: Navigation API potiče deklarativniji pristup rutiranju, omogućujući programerima da definiraju pravila i ponašanja navigacije na jasan i sažet način. To poboljšava čitljivost i održivost koda.
• Integracija s modernim frameworkovima: Navigation API je dizajniran za besprijekornu integraciju s modernim JavaScript frameworkovima i bibliotekama, kao što su React, Angular i Vue.js. To omogućuje programerima da iskoriste značajke API-ja unutar svojih postojećih razvojnih procesa.

Osnovni koncepti i značajke

1. `navigation` objekt

Srce Navigation API-ja je `navigation` objekt, koji je dostupan putem globalnog `window` objekta (tj. `window.navigation`). Ovaj objekt pruža pristup različitim svojstvima i metodama vezanim uz navigaciju, uključujući:

• `currentEntry`: Vraća `NavigationHistoryEntry` objekt koji predstavlja trenutni unos u povijesti navigacije.
• `entries()`: Vraća niz `NavigationHistoryEntry` objekata koji predstavljaju sve unose u povijesti navigacije.
• `navigate(url, { state, info, replace })`: Navigira na novi URL.
• `back()`: Navigira natrag na prethodni unos u povijesti.
• `forward()`: Navigira naprijed na sljedeći unos u povijesti.
• `reload()`: Ponovno učitava trenutnu stranicu.
• `addEventListener(event, listener)`: Dodaje event listener za događaje vezane uz navigaciju.

2. `NavigationHistoryEntry`

`NavigationHistoryEntry` sučelje predstavlja jedan unos u povijesti navigacije. Pruža informacije o unosu, kao što su njegov URL, stanje i jedinstveni ID.

• `url`: URL unosa u povijesti.
• `key`: Jedinstveni identifikator za unos u povijesti.
• `id`: Još jedan jedinstveni identifikator, posebno koristan za praćenje životnog ciklusa navigacijskog događaja.
• `sameDocument`: Booleova vrijednost koja označava rezultira li navigacija navigacijom unutar istog dokumenta.
• `getState()`: Vraća stanje povezano s unosom u povijesti (postavljeno tijekom navigacije).

3. Navigacijski događaji

Navigation API pokreće nekoliko događaja koji omogućuju programerima da prate i kontroliraju ponašanje navigacije. Ti događaji uključuju:

• `navigate`: Pokreće se kada je navigacija pokrenuta (npr. klikom na poveznicu, slanjem obrasca ili pozivom `navigation.navigate()`). Ovo je primarni događaj za presretanje i obradu navigacijskih zahtjeva.
• `navigatesuccess`: Pokreće se kada navigacija uspješno završi.
• `navigateerror`: Pokreće se kada navigacija ne uspije (npr. zbog mrežne pogreške ili neobrađene iznimke).
• `currentchange`: Pokreće se kada se trenutni unos u povijesti promijeni (npr. pri navigaciji naprijed ili natrag).
• `dispose`: Pokreće se kada `NavigationHistoryEntry` više nije dostupan, kao na primjer kada je uklonjen iz povijesti tijekom operacije `replaceState`.

Implementacija rutiranja s Navigation API-jem: Praktičan primjer

Pokažimo kako koristiti Navigation API za implementaciju osnovnog rutiranja u jednostavnoj SPA aplikaciji. Zamislimo aplikaciju s tri pogleda: Početna, O nama i Kontakt.

Prvo, stvorimo funkciju za obradu promjena rute:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Početna
Dobrodošli na početnu stranicu!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
O nama
Saznajte više o nama.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Kontakt
Stupite u kontakt s nama.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Nije pronađeno
Stranica nije pronađena.
';
  }
}

Zatim, dodajmo event listener na `navigate` događaj:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Spriječite zadanu navigaciju preglednika

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Riješite promise nakon obrade rute
  });

  event.transition = promise;
});

Ovaj kod presreće `navigate` događaj, izdvaja URL iz `event.destination` objekta, sprječava zadanu navigaciju preglednika, poziva `handleRouteChange` za ažuriranje sadržaja i postavlja `event.transition` promise. Postavljanje `event.transition` osigurava da preglednik čeka dovršetak ažuriranja sadržaja prije vizualnog ažuriranja stranice.

Konačno, možete stvoriti poveznice koje pokreću navigaciju:

Početna | O nama | Kontakt

I pridružite click listener tim poveznicama:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

Ovo postavlja osnovno rutiranje na strani klijenta koristeći Navigation API. Sada će klikanje na poveznice pokrenuti navigacijski događaj koji ažurira sadržaj `content` diva bez potpunog ponovnog učitavanja stranice.

Dodavanje upravljanja stanjem (State Management)

Navigation API također omogućuje povezivanje stanja sa svakim unosom u povijesti. Ovo je korisno za očuvanje podataka između navigacijskih događaja. Izmijenimo prethodni primjer kako bismo uključili objekt stanja.

Prilikom pozivanja `navigation.navigate()`, možete proslijediti `state` objekt:

window.navigation.navigate('/about', { state: { pageTitle: 'O nama' } });

Unutar `navigate` event listenera, možete pristupiti stanju koristeći `event.destination.getState()`:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || 'Moja Aplikacija'; // Zadani naslov

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Početna
Dobrodošli na početnu stranicu!
';
      title = 'Početna';
      break;
    case '/about':
      contentDiv.innerHTML = '
O nama
Saznajte više o nama.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Kontakt
Stupite u kontakt s nama.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Nije pronađeno
Stranica nije pronađena.
';
      title = '404 Nije pronađeno';
  }
  document.title = title;
}

U ovom izmijenjenom primjeru, `handleRouteChange` funkcija sada prihvaća `state` parametar i koristi ga za ažuriranje naslova dokumenta. Ako stanje nije proslijeđeno, zadana vrijednost je 'Moja Aplikacija'.

Korištenje `navigation.updateCurrentEntry()`

Ponekad ćete možda htjeti ažurirati stanje trenutnog unosa u povijesti bez pokretanja nove navigacije. Metoda `navigation.updateCurrentEntry()` vam to omogućuje. Na primjer, ako korisnik promijeni postavku na trenutnoj stranici, možete ažurirati stanje kako bi odražavalo tu promjenu:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Ažurirana postavka:', setting, 'na', value);
}

// Primjer korištenja:
updateUserSetting('theme', 'dark');

Ova funkcija dohvaća trenutno stanje, spaja ažuriranu postavku i zatim ažurira trenutni unos u povijesti s novim stanjem.

Napredni slučajevi upotrebe i razmatranja

1. Obrada slanja obrazaca

Navigation API se može koristiti za obradu slanja obrazaca u SPA aplikacijama, sprječavajući potpuno ponovno učitavanje stranice i pružajući glađe korisničko iskustvo. Možete presresti događaj slanja obrasca i koristiti `navigation.navigate()` za ažuriranje URL-a i prikaz rezultata bez potpunog ponovnog učitavanja stranice.

2. Asinkrone operacije

Prilikom obrade navigacijskih događaja, možda ćete trebati izvršiti asinkrone operacije, kao što je dohvaćanje podataka s API-ja. Svojstvo `event.transition` omogućuje vam povezivanje promise-a s navigacijskim događajem, osiguravajući da preglednik čeka da se asinkrona operacija završi prije ažuriranja stranice. Pogledajte primjere iznad.

3. Vraćanje pozicije skrolanja

Održavanje pozicije skrolanja tijekom navigacije ključno je za pružanje dobrog korisničkog iskustva. Navigation API pruža mehanizme za vraćanje pozicije skrolanja prilikom navigacije natrag ili naprijed u povijesti. Možete koristiti svojstvo `scroll` objekta `NavigationHistoryEntry` za pohranu i vraćanje pozicije skrolanja.

4. Obrada pogrešaka

Bitno je obraditi pogreške koje se mogu dogoditi tijekom navigacije, kao što su mrežne pogreške ili neobrađene iznimke. Događaj `navigateerror` omogućuje vam da uhvatite i elegantno obradite te pogreške, sprječavajući rušenje aplikacije ili prikazivanje poruke o pogrešci korisniku.

5. Progresivno poboljšanje (Progressive Enhancement)

Prilikom izrade SPA aplikacija s Navigation API-jem, važno je uzeti u obzir progresivno poboljšanje. Osigurajte da vaša aplikacija ispravno radi čak i ako Navigation API nije podržan u pregledniku. Možete koristiti detekciju značajki kako biste provjerili prisutnost `navigation` objekta i, ako je potrebno, vratili se na tradicionalne metode rutiranja.

Usporedba s tradicionalnim metodama rutiranja

Tradicionalne metode rutiranja u SPA aplikacijama često se oslanjaju na manipulaciju `window.location` objekta ili korištenje vanjskih biblioteka poput `react-router` ili `vue-router`. Iako su ove metode široko korištene i dobro uspostavljene, imaju neka ograničenja:

• Potpuno ponovno učitavanje stranice: Izravna manipulacija `window.location` može pokrenuti potpuno ponovno učitavanje stranice, što može biti sporo i ometajuće za korisničko iskustvo.
• Složenost: Upravljanje poviješću i stanjem tradicionalnim metodama može biti složeno i podložno pogreškama, posebno u velikim i složenim aplikacijama.
• Dodatno opterećenje na performanse: Vanjske biblioteke za rutiranje mogu dodati značajno opterećenje na performanse, pogotovo ako nisu optimizirane za specifične potrebe vaše aplikacije.

Navigation API rješava ta ograničenja pružajući jednostavnije, učinkovitije i značajkama bogatije rješenje za rutiranje i upravljanje poviješću. Uklanja potpuno ponovno učitavanje stranice, pojednostavljuje upravljanje poviješću i pruža preciznu kontrolu nad navigacijskim događajima.

Kompatibilnost s preglednicima

Krajem 2024. godine, Navigation API ima dobru podršku u modernim preglednicima, uključujući Chrome, Firefox, Safari i Edge. Međutim, uvijek je dobra praksa provjeriti najnovije informacije o kompatibilnosti preglednika na resursima poput Can I use prije implementacije Navigation API-ja u vaše produkcijske aplikacije. Ako je podrška za starije preglednike nužna, razmislite o korištenju polyfilla ili zamjenskog mehanizma.

Zaključak

Navigation API je moćan alat za izgradnju modernih, učinkovitih SPA aplikacija s naprednim mogućnostima rutiranja i upravljanja poviješću. Korištenjem značajki API-ja, programeri mogu stvoriti brža, glađa i privlačnija korisnička iskustva. Iako početna krivulja učenja može biti nešto strmija u usporedbi s korištenjem jednostavnijih, starijih metoda, prednosti Navigation API-ja, posebno u složenim aplikacijama, čine ga vrijednom investicijom. Prihvatite Navigation API i otključajte puni potencijal svojih SPA aplikacija.

Dodatni izvori za učenje

• MDN Web Docs: Navigation API
• WICG Navigation API specifikacija